<%@ page import="com.xszx.entity.TUser" %>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" %>
<%
    TUser user = (TUser)request.getSession().getAttribute("user");

%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home</title>

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="/resource/materialize/css/materialize.min.css" media="screen,projection" />
    <!-- Bootstrap Styles-->
    <link href="/resource/css/bootstrap.css" rel="stylesheet" />
    <!-- FontAwesome Styles-->
    <link href="/resource/css/font-awesome.css" rel="stylesheet" />
    <!-- Morris Chart Styles-->
    <link href="/resource/js/morris/morris-0.4.3.min.css" rel="stylesheet" />
    <!-- Custom Styles-->
    <link href="/resource/css/custom-styles.css" rel="stylesheet" />
    <!-- Google Fonts-->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
    <link rel="stylesheet" href="/resource/js/Lightweight-Chart/cssCharts.css">
    <script src="/resource/js/jquery-1.7.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>

    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>

</head>

<body>
<div id="wrapper">
    <nav class="navbar navbar-default top-navbar" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle waves-effect waves-dark" data-toggle="collapse" data-target=".sidebar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand waves-effect waves-dark" href="/jsp/index.jsp"><i class="large material-icons">insert_chart</i> <strong>固定资产管理</strong></a>
            <div id="sideNav" href=""><i class="material-icons dp48">toc</i></div>
        </div>

        <ul class="nav navbar-top-links navbar-right">
            <li><a class="dropdown-button waves-effect waves-dark" href="#!" data-activates="dropdown1"><i class="fa fa-user fa-fw"></i> <b>${user.username}</b> </a></li>
        </ul>
    </nav>
    <!-- Dropdown Structure -->
    <ul id="dropdown1" class="dropdown-content">
        <li><a href="/jsp/form.jsp"><i class="fa fa-user fa-fw"></i> 个人中心</a>
        </li>
        <li><a href="/jsp/personCenter.jsp"><i class="fa fa-bell fa-fw"></i> 个人任务</a>
        </li>
        <li><a href="/jsp/test.jsp" target="_top"><i class="fa fa-sign-out fa-fw"></i> 注销</a>
        </li>
    </ul>
    <ul id="dropdown2" class="dropdown-content w250">
        <li>
            <a href="#">
                <div>
                    <i class="fa fa-comment fa-fw"></i> New Comment
                    <span class="pull-right text-muted small">4 min</span>
                </div>
            </a>
        </li>
        <li class="divider"></li>
        <li>
            <a href="#">
                <div>
                    <i class="fa fa-twitter fa-fw"></i> 3 New Followers
                    <span class="pull-right text-muted small">12 min</span>
                </div>
            </a>
        </li>
        <li class="divider"></li>
        <li>
            <a href="#">
                <div>
                    <i class="fa fa-envelope fa-fw"></i> Message Sent
                    <span class="pull-right text-muted small">4 min</span>
                </div>
            </a>
        </li>
        <li class="divider"></li>
        <li>
            <a href="#">
                <div>
                    <i class="fa fa-tasks fa-fw"></i> New Task
                    <span class="pull-right text-muted small">4 min</span>
                </div>
            </a>
        </li>
        <li class="divider"></li>
        <li>
            <a href="#">
                <div>
                    <i class="fa fa-upload fa-fw"></i> Server Rebooted
                    <span class="pull-right text-muted small">4 min</span>
                </div>
            </a>
        </li>
        <li class="divider"></li>
        <li>
            <a class="text-center" href="#">
                <strong>See All Alerts</strong>
                <i class="fa fa-angle-right"></i>
            </a>
        </li>
    </ul>
    <!--/. NAV TOP  -->
    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">

                <li>
                    <a class="active-menu waves-effect waves-dark" href="/jsp/index.jsp"><i class="fa fa-dashboard"></i> 统计</a>
                </li>

                <li>
                    <a href="#" class="waves-effect waves-dark"><i class="fa fa-sitemap"></i>固定资产管理<span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li>
                            <a href="#">资产管理<span class="fa arrow"></span></a>
                            <ul class="nav nav-third-level">
                                <li>
                                    <a href="/jsp/assetTable.jsp">总资产管理</a>
                                </li>
                                <li>
                                    <a href="/jsp/assetFixTable.jsp">维修资产</a>
                                </li>
                                <li>
                                    <a href="/jsp/assetForbiddenTable.jsp">禁用资产</a>
                                </li>
                                <li>
                                    <a href="/jsp/assetFreeTable.jsp">空闲资产</a>
                                </li>
                                <li>
                                    <a href="/jsp/assetScrapTable.jsp">报废资产</a>
                                </li>
                                <li>
                                    <a href="/jsp/assetUsingTable.jsp">使用中资产</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="/jsp/recordTable.jsp">合同管理</a>
                        </li>
                        <li>
                            <a href="#">系统管理<span class="fa arrow"></span></a>
                            <ul class="nav nav-third-level">
                                <li>
                                    <a href="/jsp/deptTable.jsp">部门管理</a>
                                </li>
                                <li>
                                    <a href="/jsp/user.jsp">用户管理</a>
                                </li>
                                <li>
                                    <a href="/jsp/roleTable.jsp">角色管理</a>
                                </li>
                                <li>
                                    <a href="/jsp/menuTable.jsp">菜单管理</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="/jsp/empty.jsp" class="waves-effect waves-dark"><i class="fa fa-fw fa-file"></i> 日志</a>
                </li>
            </ul>

        </div>

    </nav>
    <!-- /. NAV SIDE  -->

    <div id="page-wrapper">
        <div class="header">
            <h1 class="page-header">
                统计
            </h1>
            <ol class="breadcrumb">
                <li><a href="/jsp/index.jsp">Home</a></li>
                <li><a href="/jsp/assetTable.jsp">统计</a></li>
                <li class="active">数据</li>
            </ol>

        </div>
        <div id="page-inner">


            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-3">

                    <div class="card horizontal cardIcon waves-effect waves-dark">
                        <div class="card-image red">
                            <i class="fa fa-eye fa-5x"></i>
                        </div>
                        <div class="card-stacked">
                            <div class="card-content">
                                <h3>16,150</h3>
                            </div>
                            <div class="card-action">
                                <strong> 浏览次数</strong>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-xs-12 col-sm-6 col-md-3">

                    <div class="card horizontal cardIcon waves-effect waves-dark">
                        <div class="card-image orange">
                            <i class="fa fa-shopping-cart fa-5x"></i>
                        </div>
                        <div class="card-stacked">
                            <div class="card-content" id="assetSale">
                            </div>
                            <div class="card-action">
                                <strong> 资产总价值</strong>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3">

                    <div class="card horizontal cardIcon waves-effect waves-dark">
                        <div class="card-image blue">
                            <i class="fa fa-comments fa-5x"></i>
                        </div>
                        <div class="card-stacked">
                            <div class="card-content"id="record">
                            </div>
                            <div class="card-action">
                                <strong> 处理会话次数</strong>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-xs-12 col-sm-6 col-md-3">

                    <div class="card horizontal cardIcon waves-effect waves-dark">
                        <div class="card-image">
                            <i class="fa fa-users fa-5x"></i>
                        </div>
                        <div class="card-stacked">
                            <div class="card-content" id="usercount">

                            </div>
                            <div class="card-action" i>
                                <strong> 用户总数</strong>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <script>
                $(function () {
                    $.ajax({
                        url:"/getUserCount",
                        dataType:"json",
                        type:"post",
                        success:function (data) {
                            $("#usercount").append("<h3>"+data+"</h3>")
                        }
                    })
                    $.ajax({
                        url:"/getRecordCount",
                        dataType:"json",
                        type:"post",
                        success:function (data) {
                            $("#record").append("<h3>"+data+"</h3>")
                        }
                    })
                    $.ajax({
                        url:"/getAssetSale",
                        dataType:"json",
                        type:"post",
                        success:function (data) {
                            $("#assetSale").append("<h3>"+data+"</h3>")
                        }
                    })
                })

            </script>
            <!-- /. ROW  -->
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-3">
                    <div class="card-panel text-center">
                        <h4>男用户占比</h4>
                        <div class="easypiechart" id="easypiechart-blue"  >
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3">
                    <div class="card-panel text-center">
                        <h4>女用户占比</h4>
                        <div class="easypiechart" id="easypiechart-red" >
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3">
                    <div class="card-panel text-center">
                        <h4>空闲的资产</h4>
                        <div class="easypiechart" id="easypiechart-teal" >
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3">
                    <div class="card-panel text-center">
                        <h4>使用中的资产</h4>
                        <div class="easypiechart" id="easypiechart-orange" >
                        </div>
                    </div>
                </div>
            </div><!--/.row-->

            <script>
                $.ajax({
                    url:"/getSexCount",
                    type:"post",
                    success:function (data) {
                        console.log(data)
                        $("#easypiechart-blue").attr("data-percent",data[0]+"%");
                        $("#easypiechart-blue").append("<span class=\"percent\">"+data[0] +"%</span>")
                        $("#easypiechart-red").attr("data-percent",data[1]+"%");
                        $("#easypiechart-red").append("<span class=\"percent\">"+data[1] +"%</span>")
                    }
                })

                $.ajax({
                    url:"/getAssectCount",
                    type:"post",
                    success:function (data) {
                        console.log(data)
                        $("#easypiechart-teal").attr("data-percent",data[0]+"%");
                        $("#easypiechart-teal").append("<span class=\"percent\">"+data[0] +"%</span>")
                        $("#easypiechart-orange").attr("data-percent",data[1]+"%");
                        $("#easypiechart-orange").append("<span class=\"percent\">"+data[1] +"%</span>")
                    }
                })
            </script>


            <div class="row">

                <div class="col-md-7">
                    <div class="card">
                        <div class="card-image">
                            <div id="morris" style="width: 900px; height: 350px;"></div>
                        </div>
                    </div>
                </div>

    <div class="col-md-3 col-sm-12 col-xs-12">
        <div class="card" style="width: 400px;height: 400px">
            <div class="card-image" style="font-size: 10px ;width: 400px;height: 400px">
                <div id="main" style="width:400px;height:400px; "></div>
            </div>
        </div>
    </div>

            </div>

            <div class="row">
                <div id="main1" style="width: 300px;height:300px;"></div>
            </div>
            <!-- /. ROW  -->

            <footer><p>Copyright &copy; 2016.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>


            </footer>
        </div>
        <!-- /. PAGE INNER  -->
    </div>
    <!-- /. PAGE WRAPPER  -->
</div>
<!-- /. WRAPPER  -->
<!-- JS Scripts-->
<!-- jQuery Js -->
<script src="/resource/js/jquery-1.10.2.js"></script>

<!-- Bootstrap Js -->
<script src="/resource/js/bootstrap.min.js"></script>

<script src="/resource/materialize/js/materialize.min.js"></script>

<!-- Metis Menu Js -->
<script src="/resource/js/jquery.metisMenu.js"></script>
<!-- Morris Chart Js -->
<script src="/resource/js/morris/raphael-2.1.0.min.js"></script>
<script src="/resource/js/morris/morris.js"></script>


<script src="/resource/js/easypiechart.js"></script>
<script src="/resource/js/easypiechart-data.js"></script>

<script src="/resource/js/Lightweight-Chart/jquery.chart.js"></script>

<!-- Custom Js -->


</body>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    function hrFun(param) {
        myChart.setOption({
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            title : {
                text : '各部门用户占比', //主标题文本，支持使用 \n 换行。
                link : '', //主标题文本超链接
                textStyle : { //该属性用来定义主题文字的颜色、形状等
                    color : '#099992',
                }
            },
            legend: {
                orient: 'vertical',
                x: 'right',
                y: 'bottom',
                // // orient: 'vertical',
                // //  x: 'right',
                // //  y: 'bottom',
                 textStyle: { //图例文字的样式
                     color: '#0b2b5e',
                     fontSize: 12
                                 },
            },
            series: [{
                name: "部门人数",
                type: 'pie',
                // radius: ['50%', '70%'],
                avoidLabelOverlap: true,
                label:{ //饼图图形上的文本标签
                    normal:{
                        show:true,
                        position:'inner', //标签的位置
                        textStyle : {
                            fontWeight : 300 ,
                            fontSize : 16    //文字的字体大小
                        },
                        formatter:'{d}%'
                    }
                },
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position:'inner', //标签的位置
                            textStyle: { color: "#333", fontSize: "14" },
                            formatter: function (val) {
                                return val.name + "\n(" + val.percent + "%)";
                            },
                        },
                        labelLine: {
                            show: true,
                            lineStyle: { color: "#3c4858" },
                        },
                    },
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: "rgba(0, 0, 0, 0.5)",
                        textColor: "#000",
                    },
                },

                data: [
                ]
            }]
        });

        myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
        var names = []; //类别数组（用于存放饼图的类别）
        var brower = [];
        $.ajax({
            type: 'post',
            url: '/selectDept', //请求数据的地址
            dataType: "json", //返回数据形式为json
            success: function(result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                for (var i=0;i<result.length;i++){
                    names[i]=result[i].dname;
                    brower[i]=result[i].dsum;
                }
                console.log("123+123+123"+names[1]);
                console.log(brower);
                myChart.hideLoading(); //隐藏加载动画
                myChart.setOption({ //加载数据图表
                    legend: {
                        data: names
                    },
                    series: [{
                        data: brower,


                    }]
                });
            },
            error: function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });
    }
    hrFun();
</script>
<script type="text/javascript">
    var zChart = echarts.init(document.getElementById("morris"));// 柱形图模板
    $.ajax({
        url : "/getAssetType",
        type : 'post',
        success : function(data) {
            fun(data.xData, data.yData);
            console.log(data)
        },
        error : function(data){
            alert(1);
        }
    });

    function fun(x_data, y_data) {
        var option = {
            color : [ '#3398DB' ],
            title : {
                text : '各种资产类别的统计', //主标题文本，支持使用 \n 换行。
                link : '', //主标题文本超链接
                textStyle : { //该属性用来定义主题文字的颜色、形状等
                    color : '#3398DB',
                }
            },
            tooltip : {
                trigger : 'axis',
                axisPointer : { // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid : {
                left : '6%',
                right : '20%',
                bottom : '20%',
                containLabel : true
            },
            xAxis : [ { //x轴列表展示
                type : 'category',
                data : x_data,
            } ],
            yAxis : [ { //定义y轴刻度
                type : 'value',
                scale : true,
                name : '资产数量',
                max : 140,
                min : 0,
                splitNumber : 20,
                boundaryGap : [ 0.2, 0.2 ]
            } ],
            series : [ {
                name : '资产数量',
                type : 'bar', //bar 柱状图     line 折线图 等
                barWidth : '40%', //柱的宽度
                data : y_data
            } ]
        };
        zChart.setOption(option);
    }
</script>


</html>